<extend name="layout:layout" />
<block name="title">首页</block>
<block name="css_href">
    <link href="__PUBLIC__/Home/css/index.css" rel="stylesheet">
</block>
<block name="content">

<!--视频分类-->
<div class="container Carousel_pic">
    <div class="col-lg-3 video_classify clearfix">
        
        <div class="menuContent" id="menuContent">
            <ul>
                <foreach name="categroy" item="firstCategroy">
                     <li data-detail-id="menuContent_detail_{$firstCategroy.id}">
                        <div>
                            <a href="{:U('Classify/index',['cid'=>$firstCategroy['id']])}" target="_blank" class="menuContent_title">{$firstCategroy.name}</a>
                            <p class="menuContent_cont">
                                <volist name="firstCategroy.child" id="twoCategroy" offset="0" length='3'>
                                    <a href="{:U('Classify/index',['cid'=>$twoCategroy['id']])}" target="_blank">{$twoCategroy.name}</a>
                                </volist>
                            </p>
                        </div>
                    </li>
                </foreach>
            </ul>
        </div>
       
        <volist name="categroy" id="firstCategroy">
            <div id="menuContent_detail_{$firstCategroy.id}">
                <div class="menuContent_detail_bg">
                </div>
                <div class="menuContent_detail">
                    <h3>{$firstCategroy.name}</h3>
                    <ul>
                        <volist name="firstCategroy.child" id="twoCategroy">
                            <li><a href="{:U('Classify/index',['cid'=>$twoCategroy['id']])}" target="_blank" style="background-color: #{$twoCategroy.color}">{$twoCategroy.name}</a></li>
                        </volist>
                    </ul>
                    <h3>推荐课程</h3>
                    <foreach name="firstRecomVideos[$firstCategroy['id']]" item="firstRecomVideo">
                        <a href="{:U('Detail/index',['vid'=>$firstRecomVideo['id']])}" target="_blank">{$firstRecomVideo.name}</a>
                    </foreach>
                </div>
            </div>
        </volist>
    </div>
    <!--轮播大图-->
    <div id="carousel-example-generic" class="carousel slide col-lg-9" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="__PUBLIC__/Home/pic/big_pic1.jpg" alt="...">
                <div class="carousel-caption">
                </div>
            </div>
            <div class="item">
                <img src="__PUBLIC__/Home/pic/big_pic2.jpg" alt="...">
                <div class="carousel-caption">
                </div>
            </div>
            <div class="item">
                <img src="__PUBLIC__/Home/pic/big_pic3.jpg" alt="...">
                <div class="carousel-caption">
                </div>
            </div>
        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

<!--视频列表-->
<div class="container">
    <div class="row">
        <h2 class="video_list_name"><a>热门视频</a></h2>
        <foreach name="hotVideos" item="val">
            <div class="col-sm-6 col-md-3 col-xs-6">
                <a href="{:U('Detail/index',['vid'=>$val['id']])}" target="_blank" class="video_link">
                    <div class="e8-list thumbnail">
                        <img src="__ROOT__/{$val.cover}" />
                        <div class="caption">
                            <h3>{$val.name}</h3>
                            <p>{$val.intro}</p>
                            <p>{$val.ctime|time2date}</p>
                        </div>
                    </div>
                </a>
            </div>
        </foreach>
    </div>
    <div class="row">
        <h2 class="video_list_name video_list_name2"><a>最新上传</a></h2>
        <foreach name="newVideos" item="val">
             <div class="col-sm-6 col-md-3 col-xs-6">
                <a href="{:U('Detail/index',['vid'=>$val['id']])}" target="_blank" class="video_link">
                    <div class="e8-list thumbnail">
                        <img src="__ROOT__/{$val.cover}">
                        <div class="caption">
                            <h3>{$val.name}</h3>
                            <p>{$val.intro}</p>
                            <p>{$val.ctime|time2date}</p>
                        </div>
                    </div>
                </a>
            </div>
         </foreach>
    </div>
</div>

<div class="container bg_pic"><div class="warp"><h2>随时不随地学</h2><p>响应式让你多终端感受智能学习体验</p></div></div>

     
<!--视频列表-->
<div class="container">
    <foreach name="parentCategroys" item="parentCategroy">
        <div class="row">
            <h2 class="video_list_name">
                <a href="#">{$parentCategroy.name}</a>
            </h2>
            <foreach name="firstNewVideos[$parentCategroy['id']]" item="firstNewVideo">
                <div class="col-sm-6 col-md-3 col-xs-12">
                    <a href="{:U('Detail/index',['vid'=>$firstNewVideo['id']])}" target="_blank" class="video_link">
                        <div class="e8-list thumbnail">
                            <img src="__ROOT__/{$firstNewVideo.cover}" />
                            <div class="caption">
                                <h3>{$firstNewVideo.name}</h3>
                                <p>{$firstNewVideo.intro}</p>
                                <p>{$firstNewVideo.ctime|time2date}</p>
                            </div>
                        </div>
                    </a>
                </div>
            </foreach>
        </div>
    </foreach>
</div>

</block>


<block name="javascript">
    <script>
        $(function (){
            var currentCate = null; //当前显示的分类详情
            var menuContentLi = $("#menuContent>ul>li");
            var menuContentDetail = $(".menuContent_detail");
            var flag = false;
            menuContentDetail.mouseover(function () {
                flag = true;
            }).mouseout(function () {
                flag = false
            });
            menuContentLi.mouseenter(function (){
                var c = $('#'+$(this).attr('data-detail-id'));
                if(currentCate !=null && c != currentCate){
                    currentCate.hide();
                }
                currentCate = c;
                currentCate.show();
            });
            $(".video_classify").mouseleave(function () {
                if(!flag){
                    currentCate.hide();
                }
            });
        });
    </script>
</block>